//Level2
//David li 20091008

//Market Depth
var RTQ_L2MarketDepth = function(){
    this.containerId = null;
    this.container = null;
    this.id = null;
    this.profile = null;
    this.el = null;
    this.tickerStr = '';
    this.ticker = {};
    this.dataRecords = {};
    this.maxRecord = 20;
    this.rowCountL = 0;
    this.rowCountR = 0;
    this.dgQuote = null;
    this.dgMbp = null;
    this.dgMbol =null;
    this.dgMbor = null;
    this.dgMbml =null;
    this.dgMbmr = null;
    this.arrayMaxSize =10000;
    this.mboIds={l:[],r:[]};
    this.mbpColumn = [{
                    align:"center",
                    header: "Orders",
                    dataIndex: 'BidOrder',
                    width: '10%'
                },{
                    header: "Size",
                    align:"center",
                    dataIndex: 'BidSize',
                    width: '20%'
                },{
                    header: "Bid",
                    align:"center",
                    dataIndex: 'BidPrice',
                    width: '20%'
                },{
                    header: "Ask",
                    align:"center",
                    dataIndex: 'AskPrice',
                    width: '20%'
                },{
                    header: "Size",
                    align:"center",
                    dataIndex: 'AskSize',
                    width: '20%'
                },{
                    header: "Orders",
                    align:"center",
                    dataIndex: 'AskOrder',
                    width: '10%'
                }];
    this.mbolColumn =[{
                    align: "center",
                    header: "Time",
                    dataIndex: 'Time',
                    width: '25%'
                }, {
                    header: "MMID",
                    align: "center",
                    dataIndex: 'MMID',
                    width: '25%'
                }, {
                    header: "Size",
                    align: "center",
                    dataIndex: 'Size',
                    width: '25%'
                }, {
                    header: "Bid",
                    align: "center",
                    dataIndex: 'Price',
                    width: '25%'
                }];
    this.mborColumn = [{
                    header: "Ask",
                    align: "center",
                    dataIndex: 'Price',
                    width: '25%'
                }, {
                    header: "Size",
                    align: "center",
                    dataIndex: 'Size',
                    width: '25%'
                }, {
                    header: "MMID",
                    align: "center",
                    dataIndex: 'MMID',
                    width: '25%'
                }, {
                    header: "Time",
                    align: "center",
                    dataIndex: 'Time',
                    width: '25%'
                }];
    this.mbmlColumn =[{
                        header: "MMID",
                        align: "center",
                        dataIndex: 'MMID',
                        width: '25%'
                    }, {
                        align: "center",
                        header: "Time",
                        dataIndex: 'Time',
                        width: '25%'
                    }, {
                        header: "Size",
                        align: "center",
                        dataIndex: 'Size',
                        width: '25%'
                    }, {
                        header: "Bid",
                        align: "center",
                        dataIndex: 'Price',
                        width: '25%'
                    }];
    this.mbmrColumn = [{
                        header: "Ask",
                        align: "center",
                        dataIndex: 'Price',
                        width: '33.33%'
                    }, {
                        header: "Size",
                        align: "center",
                        dataIndex: 'Size',
                        width: '33.33%'
                    }, {
                        header: "Time",
                        align: "center",
                        dataIndex: 'Time',
                        width: '33.33%'
                    }];
    this.quoteColumn =  [{
                header: "Last",
                align:"center",
                dataIndex: 'Last',
                width: '14%'
            },{
                header: "Chg",
                align:"center",
                dataIndex: 'Chg',
                width: '14%'
            },{
                header: "Chg%",
                align:"center",
                dataIndex: 'Chg%',
                width: '14%'
            },{
                header: "Vol(mil)",
                align:"center",
                dataIndex: 'Vol',
                width: '16%'
            },{
                header: "High",
                align:"center",
                dataIndex: 'High',
                width: '14%'
            },{
                header: "Low",
                align:"center",
                dataIndex: 'Low',
                width: '14%'
            },{
                header: "Time",
                align:"center",
                dataIndex: 'Time',
                width: '14%'
            }];
    this.dataPoint = {  //level2
        AMD:'401',
        BidAsk:'402',
        Price:'404',
        Size:'405',
        MMID:'407',
        Id:'409',
        Minute:'-102'
    };
    this.HTML = '<div class="rtq-l2-mkdp">' +
                '<div class="bd"><div class="title" style="z-index:3"></div>' +
                '<div class="mboheader">' +
                    '<div class="mboheaderwrap" style="min-width:400px;position:relative">' +
                        '<div class="mbolheader rtq-grid rtq-grid-auto" style="float:left;width:49.99%;border:0"></div>' +
                        '<div class="mborheader rtq-grid rtq-grid-auto" style="float:left;width:49.99%;border:0"></div>' +
                    '</div>' +
                '</div>' +
                '<div class="mbmheader">' +
                    '<div class="mbmheaderwrap" style="min-width:400px;position:relative">' +
                        '<div class="mbmlheader rtq-grid rtq-grid-auto" style="float:left;width:49.99%;border:0"></div>' +
                        '<div class="mbmrheader rtq-grid rtq-grid-auto" style="float:left;width:49.99%;border:0"></div>' +
                    '</div>' +
                '</div>' +
                '<div class="data" style="">' +
                    '<div class="mbp"></div>' +
                    '<div class="mbo" style="position:relative;">' +
                        '<div class="mbo-wrap clearfix" style="min-width:400px;">' +
                            '<div class="mbol" style="float:left;width:49.99%;min-height:12px;overflow:hidden"></div>' +
                            '<div class="mbor" style="float:left;width:49.99%;min-height:12px;overflow:hidden"></div>' +
                        '</div>' +
                    '</div>' +
                    '<div class="mbm" style="position:relative;">' +
                    '<div class="mbm-wrap clearfix" style="min-width:400px;">' +
                        '<div class="mbml" style="float:left;width:49.99%;min-height:12px;overflow:hidden"></div>' +
                        '<div class="mbmr" style="float:left;width:49.99%;min-height:12px;overflow:hidden"></div>' +
                    '</div>' +
                '</div>' +
                '</div>' +
                '</div></div>';
    //this.init();
    this.title = null;
    this.dataScrollPN = null;
    //add by yuntao
    this.uiConfig={};
    this.setttingPNObj=null;
    this.$settingPanel=null;
    this.modeRatingRBtn=null;
    this.quoteShowCheckBox = null;
    this.mode="MBO";
    this.performanceId=null;
    this.isShowQuote = true;
    this.w=null;
    this.h=null;
    this.elSegment={mbo:null,mbohd:null,mbp:null,mbol:null,mbor:null,mbolhd:null,mborhd:null,mbohdwrap:null,title:null};
};
RTQ_L2MarketDepth.prototype = {
    init:function(ContainerId, Profile, Sid){
        var self = this;
		this.id = Sid;
        this.profile = Profile;
		if(ContainerId) {
			this.containerId = ContainerId;
			this.container = $('#' + ContainerId);
		}else{
			this.container=this.profile.container||$(document.body);
		}
        this.el = $(this.HTML);
        this.elSegment.mbohd = this.el.find(".mboheader");
        this.elSegment.mbmhd = this.el.find(".mbmheader");
        this.elSegment.mbo = this.el.find(".mbo");
        this.elSegment.mbp = this.el.find(".mbp");
        this.elSegment.mbm = this.el.find(".mbm");
        this.elSegment.mbol=this.el.find('div.mbol');
        this.elSegment.mbor=this.el.find('div.mbor');
        this.elSegment.mbml=this.el.find('div.mbml');
        this.elSegment.mbmr=this.el.find('div.mbmr');
        this.elSegment.mbolhd=this.el.find('div.mbolheader');
        this.elSegment.mborhd=this.el.find('div.mborheader');
        this.elSegment.mbmlhd=this.el.find('div.mbmlheader');
        this.elSegment.mbmrhd=this.el.find('div.mbmrheader');
        this.elSegment.mbohdwrap=this.el.find('div.mboheaderwrap');
        this.elSegment.mbmhdwrap=this.el.find('div.mbmheaderwrap');
        this.elSegment.title = this.el.find(".title");
        this.title = this.el.find('.title');
		if(this.profile.mode){
            this.mode=this.profile.mode;
        }
        if(this.profile.maxRecord>0){
            this.maxRecord=this.profile.maxRecord;
        }
		if(typeof(this.profile.isShowQuote)!="undefined"){
            this.isShowQuote =this.profile.isShowQuote; 
        }
        if(typeof this.profile.hasSetting == "undefined"){
            this.profile.hasSetting=true;
        }
        if(this.profile.hasSetting){
            this.createSettingPanel();
        }
        if(this.profile.width){
            this.w=this.profile.width;
        }
        if(this.profile.height){
            this.h=this.profile.height;
        }
        this._createDataGrids();
        this.el.appendTo(this.container);
        this.elSegment.mbo[0].style.display="none";
        this.elSegment.mbohd[0].style.display="none";
        this.elSegment.mbp[0].style.display="none";
        if (this.hasSearch) {
            this.initAutoComplete();
        }
        this.dataScrollPN = new Util.ScrollPanel(this.elSegment.mbo[0], {}, {
            onScroll: function(sl, st){//mboheader
                if (typeof(self.elSegment) != "undefined") {
                    self.elSegment.mbohd.scrollLeft(sl);
                }
            }
        });
		if (this.profile.ticker) {
			this.acceptTicker(this.profile.ticker);
		}else {
			this.showQuote(this.isShowQuote);
			this.changeMode(this.mode);
		}
        //this.acceptTicker(this.profile.ticker);
    },
    changeMode:function(mode){
        this.mode=mode;
        if(mode=='MBO'){
            this.elSegment.mbp[0].style.display="none";
            this.elSegment.mbm[0].style.display="none";
            this.elSegment.mbmhd[0].style.display="none";
            this.elSegment.mbohd[0].style.display="";
            this.elSegment.mbo[0].style.display="";
            if (this.dgMbol != null) {
                this.dgMbol.empty();
                this.dgMbor.empty();
            }
            this.rowCountL=0;
            this.rowCountR=0;
            this.mboIds={l:[],r:[]};
            if(this.ticker.gkey && gData[this.ticker.gkey]){
                this.updateMbo(gData[this.ticker.gkey]);
            }
        }else if(mode=='MBP'){
            this.elSegment.mbo[0].style.display="none";
            this.elSegment.mbohd[0].style.display="none";
            this.elSegment.mbm[0].style.display="none";
            this.elSegment.mbmhd[0].style.display="none";
            this.elSegment.mbp[0].style.display="";
            this.updateMbp(gData[this.ticker.gkey]);
        }else if(mode == 'MBM'){
            this.elSegment.mbp[0].style.display="none";
            this.elSegment.mbo[0].style.display="none";
            this.elSegment.mbohd[0].style.display="none";
            this.elSegment.mbmhd[0].style.display="";
            this.elSegment.mbm[0].style.display="";
            if (this.dgMbml != null) {
                this.dgMbml.empty();
                this.dgMbmr.empty();
            }
            this.rowCountL=0;
            this.rowCountR=0;
            this.mbmIds={l:[],r:[]};
            if (this.ticker.gkey && gData[this.ticker.gkey]) {
                this.updateMbm(gData[this.ticker.gkey]);
            }
        }
    },
    updateMbp:function(d,oldData){
        if(typeof(d)=="undefined"){
            return;
        }
        for(var i =0;i<this.maxRecord;i++){
            this.dgMbp.DOMMap[i+1]["AskOrder"].innerHTML=d["AskOrder_"+i]||"";
            this.dgMbp.DOMMap[i+1]["BidOrder"].innerHTML=d["BidOrder_"+i]||"";
            this.dgMbp.DOMMap[i+1]["BidSize"].innerHTML=d["BidSize_"+i]||"";
            this.dgMbp.DOMMap[i+1]["BidPrice"].innerHTML=d["BidPrice_"+i]||"";
            this.dgMbp.DOMMap[i+1]["AskPrice"].innerHTML=d["AskPrice_"+i]||"";
            this.dgMbp.DOMMap[i+1]["AskSize"].innerHTML=d["AskSize_"+i]||"";
        }
    },
   
    changeOutSize:function(w, h){
        var parent = this.container.parent();
        w = w||parent.width();
        h = h||parent.height()+1;
        this.w=w;
        this.h=h;
        var dh = this.isShowQuote?50:0;
        if(this.mode=='MBP'){
            this.el.find('div.mbp').css({height:h-dh});
            this.dgMbp.resize(null,h-dh);
        }else if(this.mode == 'MBO'){
            this.dataScrollPN.reSize(w, h-dh-25);
            var self = this;
            setTimeout(function(){
                if(typeof(self.elSegment)!="undefined"){
                    self.elSegment.mbohdwrap.width(self.elSegment.mbo.width());
                }
            }, 200);
            this._clearDgHeaderMarginRight();
        }else if(this.mode == 'MBM'){
            this.dataScrollPN.reSize(w, h-dh-25);
            var self = this;
            setTimeout(function(){
                if(typeof(self.elSegment)!="undefined"){
                    self.elSegment.mbmhdwrap.width(self.elSegment.mbm.width());
                }
            }, 200);
            this._clearDgHeaderMarginRight();
        }
        
    },
    addTicker:function(Ticker){ //'XXX:IBM'
        if (this.tickerStr != Ticker) {
            this.tickerStr = Ticker;
            var self = this;
            if (typeof this.showLoading == 'function'){
                this.showLoading(true);
            } 
            this.tValidation.checkTickers(this.tickerStr, function(o){
                self.validateCallback(o)
            });
        }
    },
    validateCallback:function(gkeyList){
        var d;
        for (var i = 0; i < gkeyList.length; i++) {
            d = gData[gkeyList[i]] ? gData[gkeyList[i]] : gData[gIdMap[gkeyList[i]]];
            if(this.ticker && this.ticker.gkey && this.ticker.gkey == gkeyList[i]){
                //this.hideLoading();
                continue;
            }
            if (this.ticker.gkey != '') {
                this.tValidation.unSubscribe([this.performanceId]); // unsubscribe ticker
            }
            this.ticker.gkey = gkeyList[i];
            this.performanceId=gData[gkeyList[i]]["performanceId"];
			this.dgQuote.empty();
            this.updateQuote(gkeyList[i]);
            if(this.setTitle){
                this.setTitle('Market Depth',gData[this.ticker.gkey].ticker);
            }
            if(this.mode!='MBP'){
                if(d.country=='HKG'||d.country=='CAN'){
                    this.mode='MBP';
                }
            }else{
                if(d.country!='HKG'&&d.country!='CAN'){
                    this.mode='MBO';
                }
            }
            if(this.settingPNObj!=null){
                if(d.country=='HKG'){
                    this.settingPNObj.disableModelRBtn(['MBO','MBM']);
                }else if(d.country=='CAN'){
                    this.settingPNObj.disableModelRBtn(false);
                }else{
                    this.settingPNObj.disableModelRBtn(['MBP']);
                }
                this.settingPNObj.selectModelRBtn(this.mode);
            }
            this.changeMode(this.mode);
            this.showQuote(this.isShowQuote);
        }
        if(typeof(this.hideLoading) == 'function'){
            this.hideLoading();
        }
    },
    acceptTicker: function(Ticker){
        if(Ticker!=null&&Ticker!=''){
            this.addTicker(Ticker);
        }
    },
    updateData:function(gKey,d){    
        if (gKey == this.ticker.gkey) {
            this.updateQuote(gKey, d);
            if(this.mode=='MBM'){
                this.updateMbm(gData[gKey]);
            }
            if(this.mode=='MBO'){
                this.updateMbo(gData[gKey]);
            }
            if(this.mode=='MBP'){
                this.updateMbp(gData[gKey],d);
            }
        }       
    },
    updateMbo:function(d){
        var point = this.dataPoint;
        var id = d[point.Id];
        if(this.elSegment.mbo[0].style.display=="none"){
            this.elSegment.mbo[0].style.display=="";
        }
        var amd = d[point.AMD] ? d[point.AMD] : '';
        var size = d[point.Size] ? d[point.Size] : '';
        var price = d[point.Price] ? d[point.Price] : '';
        var time = d[point.Minute] ? d[point.Minute] : '';
        var mmid = d[point.MMID] ? d[point.MMID] : '';
        
        //Shariq: Fixed Bid showing up on right and ask showing up on left.
        var dg = this.dgMbol;
        if (d[point.BidAsk] != 0) {
            dg = this.dgMbor;
        }
        var ty = amd.toString();
        
        if(mmid == null || mmid == ""){
            //return;
            mmid="----";
        }
        
        if(ty=="0"){//empty
            dg.empty();
             if (d[point.BidAsk] != 0) {
                this.rowCountL=0;
             }else{
                this.rowCountR=0;
             }
            this.changeOutSize(this.w,this.h);
        }else if(typeof(id) != "undefined"){
            if(ty=="1"){//delete
                if (typeof(dg.DOMMap[id]) == "undefined") {
                    return;
                }
                dg.removeRow(id);
                if (d[point.BidAsk] != 0) {
                    this.rowCountL--;
                } else {
                    this.rowCountR--;
                }
            }else if(ty=="2"){//add
                if (typeof(dg.rows[id]) != "undefined") {
                    return;
                }
                dg.addRow({Time: FDate(time), MMID: mmid,Price: price,Size: size}, id, 0);              
                if (d[point.BidAsk] != 0) {
                    this.rowCountL++;
                    this.mboIds.l.push(id);
                    if (this.mboIds.l.length > this.maxRecord&&this.rowCountL>this.maxRecord) {
                        dg.removeRow(this.mboIds.l[this.mboIds.l.length - this.rowCountL]);
                        this.rowCountL--;
                    }
                    if(this.mboIds.l.length==this.arrayMaxSize){
                        this.mboIds.l=this.mboIds.l.slice(this.arrayMaxSize-this.maxRecord);
                    }
                } else {
                    this.rowCountR++;
                    this.mboIds.r.push(id);
                    if (this.mboIds.r.length > this.maxRecord&&this.rowCountR>this.maxRecord) {
                        dg.removeRow(this.mboIds.r[this.mboIds.r.length - this.rowCountR]);
                        this.rowCountR--;
                    }
                    if(this.mboIds.r.length==this.arrayMaxSize){
                        this.mboIds.r=this.mboIds.r.slice(this.arrayMaxSize-this.maxRecord);
                    }
                }
                
                if(Math.max(this.rowCountL, this.rowCountR) < this.maxRecord - 1){
                    this.changeOutSize(this.w,this.h);
                }
                
            }else if(ty=="3"&&typeof(dg.DOMMap[id]) != "undefined"){//update
                dg.DOMMap[id]["Time"].innerHTML = FDate(time);
                dg.DOMMap[id]["MMID"].innerHTML = mmid;
                dg.DOMMap[id]["Price"].innerHTML = price;
                dg.DOMMap[id]["Size"].innerHTML = size;
            }
        }
    },
    updateMbm:function(d){
        var point = this.dataPoint;
        var id = d[point.Id];
        if(this.elSegment.mbm[0].style.display=="none"){
            this.elSegment.mbm[0].style.display=="";
        }
        var amd = d[point.AMD] ? d[point.AMD] : '';
        var size = d[point.Size] ? d[point.Size] : '';
        var price = d[point.Price] ? d[point.Price] : '';
        var time = d[point.Minute] ? d[point.Minute] : '';
        var mmid = d[point.MMID] ? d[point.MMID] : '';
        var exchangeVisible = [];
        
        var dg = this.dgMbml;
        var otherSide = this.dgMbmr;    //Shariq:   this will provide a symmetrical line-up of Bid and Ask
        if (d[point.BidAsk] != 0) {
            dg = this.dgMbmr;
            otherSide = this.dgMbml;
        }
        var ty = amd.toString();
        if(mmid == null || mmid == ""){
            //return;
            mmid="----";
        }
        id = mmid;
        if(ty=="0"){//empty
            dg.empty();
            otherside.empty();
             if (d[point.BidAsk] != 0) {
                this.rowCountL=0;
             }else{
                this.rowCountR=0;
             }
            this.changeOutSize(this.w,this.h);
        }else if(typeof(id) != "undefined"){
            if(ty=="1"){//delete
                if (typeof(dg.DOMMap[id]) == "undefined") {
                    return;
                }
                dg.removeRow(id);
                if (d[point.BidAsk] != 0) {
                    this.rowCountL--;
                } else {
                    this.rowCountR--;
                }
            }else if(ty=="2"){//add
                exchangeVisible[exchangeVisible.length == 0 ? exchangeVisible.length : exchangeVisible.length + 1] = mmid;
                //Shariq:   ty is never 3, therefore, need to detect the update when ty =2
                if(exchangeVisible.indexOf(mmid) != -1){
                    if(dg.DOMMap[id] != null){
                        //just update it -- only update the cell that is changing
                        dg.DOMMap[id]["Time"].innerHTML = FDate(time);
                        if(dg == this.dgMbml){
                            dg.DOMMap[id]["MMID"].innerHTML = mmid;
                        }
                        if(dg.DOMMap[id]["Price"].innerHTML != price){
                            dg.DOMMap[id]["Price"].innerHTML = price;
                            flash(dg.DOMMap[id]["Price"], null, "100");
                        }
                        if(dg.DOMMap[id]["Size"].innerHTML != size){
                            dg.DOMMap[id]["Size"].innerHTML = size;
                            flash(dg.DOMMap[id]["Size"], null, "100");
                        }
                        return;
                    }
                }

                if(dg == this.dgMbml){
                    dg.addRow({MMID: mmid, Time: FDate(time), Size: size, Price: price}, id, 0);
                    if(otherSide.DOMMap[id] == null){
                        otherSide.addRow({Price: "", Size: "", Time: ""}, id, 0);
                    }
                } else{
                    dg.addRow({Price: price, Size: size, Time: FDate(time)}, id, 0);
                    if(otherSide.DOMMap[id] == null){
                        otherSide.addRow({MMID: mmid, Time: "", Size: "", Price: ""}, id, 0);
                    }
                }

                    this.rowCountL++;
                    this.mbmIds.l.push(id);
                    if (this.mbmIds.l.length > this.maxRecord&&this.rowCountL>this.maxRecord) {
                        dg.removeRow(this.mbmIds.l[this.mbmIds.l.length - this.rowCountL]);
                        this.rowCountL--;
                    }
                    if(this.mbmIds.l.length==this.arrayMaxSize){
                        this.mbmIds.l=this.mbmIds.l.slice(this.arrayMaxSize-this.maxRecord);
                    }
                if(Math.max(this.rowCountL, this.rowCountR) < this.maxRecord - 1){
                    this.changeOutSize(this.w,this.h);
                }
                
            }else if(ty=="3"&&typeof(dg.DOMMap[id]) != "undefined"){//update
                dg.DOMMap[id]["Time"].innerHTML = FDate(time);
                dg.DOMMap[id]["MMID"].innerHTML = mmid;
                dg.DOMMap[id]["Price"].innerHTML = price;
                dg.DOMMap[id]["Size"].innerHTML = size;
            }
        }
    },
    updateQuote:function(gkey,oldData){  // o is the data record in gData. oldData is from push server.
        var data ={Symbol:null,Last:null,Chg:null,"Chg%":null,Vol:null,High:null,Low:null,Time:null}
        if(this.dgQuote.getRowLength()==0){
            this.dgQuote.addRow(data,"quote");
        }
		var AHData={};
        if (push && push.proxy) {
            AHData = push.proxy.getMarketQuoteData(gkey);
        }
		var o=gData[gkey];
		if(!oldData){
			oldData={};
			oldData['LastPrice']=AHData['LastPrice'];
			oldData['Chg']=AHData['Chg'];
			oldData['Chg%']=AHData['Chg%'];
			oldData['Time']=AHData['Time'];
			oldData['Volume']=o['Volume'];
			oldData['HighPrice']=o['HighPrice'];
			oldData['LowPrice']=o['LowPrice'];
		}
        if(typeof oldData.LastPrice!='undefined'){
            var last=typeof oldData.LastPrice.value!='undefined'?oldData.LastPrice.value:null;
            var oLast=oldData.LastPrice.oValue;
			if (last != null) {
				this.dgQuote.DOMMap["quote"]["Last"].innerHTML = parseFloat(last).toFixed(2);
				flash(this.dgQuote.DOMMap["quote"]["Last"], last, oLast);
			}
        }
		if (typeof oldData.Chg != 'undefined') {
			var chg =typeof oldData.Chg.value != 'undefined' ? oldData.Chg.value :null;
			var oChg =typeof oldData.Chg.oValue != 'undefined' ? oldData.Chg.oValue : null;
			if (chg != null) {
				this.dgQuote.DOMMap["quote"]["Chg"].innerHTML = "<span style='color:" + (parseFloat(chg).toFixed(2) >= 0 ? QS_Style.greenFontColor : QS_Style.redFontColor) + "'>" + parseFloat(chg).toFixed(2) + "<span>";
				flashWithDirectional(this.dgQuote.DOMMap["quote"]["Chg"], chg, oChg, chg >= 0);
			}
		}
        if (typeof oldData["Chg%"] != 'undefined') {
			var chgp = typeof oldData["Chg%"].value != 'undefined' ? oldData["Chg%"].value : null;
			var oChgp = typeof oldData["Chg%"].oValue != 'undefined' ? oldData["Chg%"].oValue : null;
			if (chgp != null) {
				this.dgQuote.DOMMap["quote"]["Chg%"].innerHTML = "<span style='color:" + (parseFloat(chgp).toFixed(2) >= 0 ? QS_Style.greenFontColor : QS_Style.redFontColor) + "'>" + parseFloat(chgp).toFixed(2) + "<span>";
				flashWithDirectional(this.dgQuote.DOMMap["quote"]["Chg%"], chgp, oChgp, chgp >= 0);
			}
		}
        if(typeof oldData.Volume!='undefined'){
            var volume=typeof oldData.Volume.value!='undefined'?oldData.Volume.value:o.Volume;
			if (typeof volume != 'undefined') {
				this.dgQuote.DOMMap["quote"]["Vol"].innerHTML = parseFloat((volume / 1000000)).toFixed(4);
				flash(this.dgQuote.DOMMap["quote"]["Vol"], null, null);
			}
        }
        
        if(typeof oldData.Time!='undefined'){
            var time=typeof oldData.Time.value!='undefined'?oldData.Time.value:null;
			if (time != null) {
				this.dgQuote.DOMMap["quote"]["Time"].innerHTML = FDate(time);
			}
        }
        if(typeof oldData.HighPrice!='undefined'){
            var highPrice=typeof oldData.HighPrice.value!='undefined'?oldData.HighPrice.value:o.HighPrice;
			if (typeof highPrice != 'undefined') {
				this.dgQuote.DOMMap["quote"]["High"].innerHTML = highPrice.toFixed(2);
			}
        }
        if(typeof oldData.LowPrice!='undefined'){
            var lowPrice=typeof oldData.LowPrice.value!='undefined'?oldData.LowPrice.value:o.LowPrice;
			if (typeof lowPrice != 'undefined') {
				this.dgQuote.DOMMap["quote"]["Low"].innerHTML = lowPrice.toFixed(2);
			}
        }
    },
    showQuote:function(v){
        this.isShowQuote = v;
        if(v){
            this.elSegment.title[0].style.display="";
        }else{
            this.elSegment.title[0].style.display="none";
        }
        this.changeOutSize(this.w,this.h);
    },
    createSettingPanel:function(){
        var self=this;
        this.settingPNObj=new RTQ_L2MarketDepth_SettingPanel({
            onModeChanged:function(v){
                self.changeMode(v);
            },
            onQuoteChecked:function(v){
                self.showQuote(v);
            }
        },{
            container:this.profile.settingContainer||$(document.body),
            isShowQuote:this.isShowQuote,
            selectMode:this.mode
        });
    },
     _createDataGrids:function(){
        this.dgQuote = new Util.DataGrid(this.el.find('div.title'), {}, {
            column: this.quoteColumn,
            width: this.w,
            height: 60,
            htmlLayer: 'div',
            autoWidth: true,
            autoHeight: true,
            indexColKey: 'RID',
            sortable: false
        }, {});
        this.ticker = {
            gkey: ''
//            serviceName: '',
//            itemName: ''
        };
        this.dgMbol = new Util.DataGrid(this.el.find('div.mbol'), {}, {
            column: this.mbolColumn,
            height: 420,
            htmlLayer: 'div',
            autoWidth: true,
            autoHeight: true,
            indexColKey: 'RID',
            sortable: false,
            showYScrollbar: false
        }, {});
        
        this.dgMbor = new Util.DataGrid(this.el.find('div.mbor'), {}, {
            column: this.mborColumn,
            height: 420,
            htmlLayer: 'div',
            autoWidth: true,
            autoHeight: true,
            indexColKey: 'RID',
            sortable: false,
            showYScrollbar: false
        }, {});
        this.dgMbml = new Util.DataGrid(this.el.find('div.mbml'), {}, {
            column: this.mbmlColumn,
            height: 420,
            htmlLayer: 'div',
            autoWidth: true,
            autoHeight: true,
            indexColKey: 'RID',
            sortable: false,
            showYScrollbar: false
        }, {});
        
        this.dgMbmr = new Util.DataGrid(this.el.find('div.mbmr'), {}, {
            column: this.mbmrColumn,
            height: 420,
            htmlLayer: 'div',
            autoWidth: true,
            autoHeight: true,
            indexColKey: 'RID',
            sortable: false,
            showYScrollbar: false
        }, {});
        this.dgMbp = new Util.DataGrid(this.el.find('div.mbp'), {}, {
            column: this.mbpColumn,
            width: this.w,
            htmlLayer: 'div',
            autoWidth: true,
            indexColKey: 'RID',
            sortable: false
        }, {});
        for(var i =0;i<this.maxRecord;i++){
            var tdata = {BidOrder:"",BidSize:"",BidPrice:"",AskPrice:"",AskSize:"",AskOrder:""};
            this.dgMbp.addRow(tdata,i+1);
        }
        this.dgMbol.header.el.appendTo(this.elSegment.mbolhd);
        this.dgMbor.header.el.appendTo(this.elSegment.mborhd);
        this.dgMbml.header.el.appendTo(this.elSegment.mbmlhd);
        this.dgMbmr.header.el.appendTo(this.elSegment.mbmrhd);
        this._clearDgHeaderMarginRight();
    },
    _clearDgHeaderMarginRight:function(){
        this.dgMbol.header.el[0].style.marginRight = '0';
        this.dgMbor.header.el[0].style.marginRight = '0';
        this.dgMbml.header.el[0].style.marginRight = '0';
        this.dgMbmr.header.el[0].style.marginRight = '0';
    },
    autoCPCallback:function(o){
        this.addTicker(o);
    },
    saveConfig:function(){
        return { ticker: this.tickerStr, title: this.getTitle(),showQuote:this.isShowQuote,mode:this.mode };
    },
    reSubscribe:function(){
        if (this.ticker.gkey != ''&&this.ticker.gkey.length>0) {
            this.tValidation.checkTickers([this.performanceId]);
        }
    },
    stopSubscribe:function(){
        if (this.ticker.gkey != ''&&this.ticker.gkey.length>0) {
            this.tValidation.unSubscribe([this.performanceId]); // unsubscribe ticker
        } 
    },
    clear:function(){
        if(this.ticker.gkey!=''&&this.ticker.gkey.length>0){
            this.tValidation.unSubscribe([this.performanceId]);  // unsubscribe ticker.
        }
        for(var p in this){
            if(!p || p == 'clear'){continue;}
            this[p] = null;
            delete this[p];
        }
    }
};

